<template>
  <div class="" v-if="ising" >
    <div class="p_Blankpages" v-if="list.length <= 0" >
        <div class="p_Blankpages2" style="display:block">
            <div class="p_blank_ico">
              <img src="https://jzcdn.jzdoctor.com/notdata.png" style="width:30%;margin:0 auto">
            </div>
            <div class="p_blank_hist">暂无订单信息</div>
        </div>
    </div>
  	<ul class="order-ul" v-else v-scroll="getMore">
  		<li v-for="item in list" >
        <div class="order-num">订单号：{{item.orderNo}}</div>
  			<div class="order-li">
	  			<div><img :src="item.offlineTrademarkFaceUrl"></div>
	  			<div class="order-info">
	  				<div class="info-name">
	  					<div class="name">{{item.offlineTrademarkName}}</div>
	  					<div class="price"><em>¥</em>{{item.payAmount}}</div>
	  				</div>
	  				<div class="info-des">{{item.offlineShopName}}</div>
            <div class="order-time">
              <div class="text">{{item.createDate}}</div>
              <div class="status" v-if="item.state == 1" ><span style="color: #b4272d;border: 1px solid;">{{item.stateName}}</span></div>
              <div class="status" v-else ><span>{{item.stateName}}</span></div>
            </div>
	  			</div>
  			</div>
  			
  		</li>
  	</ul>
  </div>
</template>
<script>
  // import Vue from 'vue'
  // import Lockr from 'lockr'
  export default {
    name: 'chosepay',
    data () {
      return {
        ising: false,
        list: [],
        isactive: false,
        isfined: false,
        pageindex: 1
      }
    },
    mounted: function () {
      this.init()
    },
    watch: {
    },
    methods: {
      init: function () {
        this.getList()
      },
      getList: function () {
        let _this = this
        if (this.isactive || this.isfined) {
          return false
        }
        this.isactive = true
        this.$EcHttpUtils.get('order/list.json', {index: _this.pageindex, pageSize: 10, state: 1}).then(function (ret) {
          _this.ising = true
          // _this.isactive = false
          // if (resp.data.statusCode === 0) {
          //   let list = resp.data.data.records
          //   _this.list = list
          // }
          _this.isactive = false
          if (ret.data.statusCode === 0) {
            let list = ret.data.data.records
            if (list.length <= 0) {
              _this.isshow = true
              _this.isfined = true
              return false
            }
            if (ret.data.data.totalCount <= 10) {
              _this.isfined = true
            }
            _this.list = _this.list.concat(list)
            _this.pageindex++
          }
        })
      },
      getMore: function () {
        this.getList()
      }
    },
    directives: {
      scroll: {
        bind: function (el, binding) {
          window.addEventListener('scroll', (e) => {
            if ((document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >= el.clientHeight) {
              let getMore = binding.value
              getMore()
            }
          })
        }
      }
    }
  }
</script>
<style>
	.change-list{position: relative;}
	.base-img{margin-left: .5rem;width:4rem;height: 4rem;}
	.base-img img{border-radius: .15rem;}
	.base-pribtn{font-size: .9rem;padding: 0px .9rem;height: 1.4rem;line-height: 1.4rem;position: absolute;right: .5rem;bottom: .5rem;}
	.base-pridis{text-decoration: unset;font-size: .55rem;position: absolute;left: 5rem;bottom: .4rem;right:4rem;max-height: 2.3rem;overflow-y: hidden;}
	.base-pridis .font{background: #ffa229;color: #fff;font-size: .45rem;padding: 0.025rem 0.0625rem;margin-right: 0.2rem;vertical-align: 0.05rem;}
	.base-pridis > div{overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
	.base-sku{height: .85rem;line-height: .85rem;}
</style>
